<template>
  <rj-modal
    :visible="visible"
    :title="
      operateType == 'add'
        ? $t('flowControl.addApplyGroup')
        : $t('flowControl.editApplyGroup')
    "
    :width="700"
    :maskClosable="false"
    :keyboard="false"
    :destroyOnClose="true"
    @cancel="close"
    @ok="ok"
  >
    <div class="customConfContent">
      <!-- 应用组名称 -->
      <div class="confItem">
        <span class="confItemTitle">
          <span class="titleTxt">{{ $t('flowControl.applyGroupName') }}</span>
        </span>
        <div class="confItemC">
          <a-form
            :form="form"
            :label-col="{ span: 0 }"
            :wrapper-col="{ span: 24 }"
          >
            <a-form-item label="">
              <a-input
                :disabled="
                  selectInfo && selectInfo.referenceCount > 0 ? true : false
                "
                autocomplete="off"
                :placeholder="$t('flowControl.applyGroupName')"
                v-decorator="[
                  'customGroupName',
                  { rules: [{ validator: checkGroupName }] },
                ]"
              />
            </a-form-item>
          </a-form>
        </div>
      </div>

      <!-- 自定义应用 -->
      <div class="confItem">
        <span class="confItemTitle between">
          <span class="titleTxt">{{ $t('flowControl.customApply') }}</span>
          <span class="clear" @click="clearApply">{{
            $t('deviceDetail.clear')
          }}</span>
        </span>
        <div class="confItemC">
          <ApplyTreeSelect
            ref="customeApplyTree"
            :gwSn="gwSn"
            :selectApply="selectApply"
            @renderSuccess="renderSuccess"
          />
        </div>
      </div>

      <!-- 备注 -->
      <div class="confItem">
        <span class="confItemTitle">
          <span class="titleTxt">{{ $t('alarmConf.comments') }}</span>
        </span>
        <div class="confItemC">
          <a-form
            :form="form"
            :label-col="{ span: 0 }"
            :wrapper-col="{ span: 24 }"
          >
            <a-form-item label="">
              <a-input
                autocomplete="off"
                :placeholder="$t('alarmConf.comments')"
                v-decorator="[
                  'description',
                  { rules: [{ validator: checkDesc }] },
                ]"
              />
            </a-form-item>
          </a-form>
        </div>
      </div>
    </div>
  </rj-modal>
</template>
<script>
import { maccApi, requestHttp, ValiDateTools } from '@utils/index';
import { RjModal } from '@components';
import ApplyTreeSelect from '@views/common/applyTreeSelect/index.vue';
import lodash from 'lodash';
export default {
  name: 'OperateCustomModal',
  props: {
    visible: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    operateType: {
      type: String,
      default: () => {
        return 'add';
      },
    },
    gwSn: {
      type: String,
    },
    selectInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  data() {
    return {
      form: this.$form.createForm(this, {
        name: 'customeApplyForm',
      }),
      selectApply: [],
    };
  },

  components: {
    'rj-modal': RjModal,
    ApplyTreeSelect,
  },

  watch: {
    visible(val) {
      if (!val) {
        this.form.resetFields();
        this.clearApply();
        return;
      }
      if (this.operateType == 'edit') {
        this.$nextTick(() => {
          this.renderEdit();
        });
      }
    },
  },

  mounted() {},

  methods: {
    //编辑渲染
    renderEdit() {
      console.log('111', this.selectInfo);
      if (lodash.isEmpty(this.selectInfo)) return;
      const { customGroupName = '', description = '' } = this.selectInfo;
      this.form.setFieldsValue({
        customGroupName,
        description,
      });
    },

    renderSuccess() {
      if (this.operateType == 'edit') {
        const { appList = [] } = this.selectInfo;
        this.selectApply = appList;
      }
    },

    //点击清除应用
    clearApply() {
      this.selectApply = [];
      // this.$refs.customeApplyTree.restSelectApply();
    },
    //校验应用组名称
    checkGroupName(rule, value, callback) {
      if (!value || value == '') {
        callback(new Error(this.$t('flowControl.inputApplyGroupName')));
        return;
      }
      const { result, msg } = ValiDateTools.checkStrLength(value, 1, 27);
      if (!result) {
        callback(new Error(msg));
      }

      callback();
    },

    //校验备注
    checkDesc(rule, value, callback) {
      if (!value || value == '') {
        callback(new Error(this.$t('flowControl.inputApplyGroupDesc')));
      }
      const { result, msg } = ValiDateTools.checkStrLength(value, 1, 32);
      if (!result) {
        callback(new Error(msg));
      }

      callback();
    },

    getCustomeApplyGroupVal() {
      return new Promise((resolve) => {
        try {
          console.log('this.form', this.form);

          this.form.validateFields((err, values) => {
            const applyArr = this.$refs.customeApplyTree.getSelectApply();
            if (err || applyArr.length == 0) {
              applyArr.length == 0 &&
                this.$message.error(this.$t('flowControl.pleaseSelectApply'));
              resolve({
                success: false,
              });
            }
            resolve({
              success: true,
              data: {
                ...values,
                appList: applyArr,
                sn: this.gwSn,
              },
            });
          });
        } catch (e) {
          console.log('eeee', e);
        }
      });
    },

    close() {
      this.$emit('closeAddModal', 'cancel');
    },

    async ok() {
      let { success, data = {} } = await this.getCustomeApplyGroupVal();
      if (!success) return;
      if (this.operateType == 'edit') {
        const { customGroupId } = this.selectInfo;
        data = {
          customGroupId,
          ...data,
        };
      }
      console.log('data111111', data);
      this.$emit('closeAddModal', this.operateType, data);
    },
  },
};
</script>

<style lang="less" scoped>
.customConfContent {
  counter-reset: titleNum;
}

.confItem {
  padding-left: 30px;
  position: relative;
  margin-bottom: 30px;
  &::before {
    counter-increment: titleNum;
    content: counter(titleNum);
    position: absolute;
    left: 0;
    top: 0px;
    background: #f5f5f5;
    border-radius: 2px;
    width: 24px;
    height: 24px;
    color: #2b6afd;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .confItemTitle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 9px;
    &.between {
      justify-content: space-between;
    }
    .clear {
      cursor: pointer;
      color: #2b6afd;
    }
  }
  .titleTxt {
    font-size: 16px;
    color: #000;
  }
}
</style>
